<template>
  <div
    class="billPageListComponent"
    v-if="oItem"
    :style="{
      paddingTop: oItem.main.wrapperPT + 'px',
      paddingBottom: oItem.main.wrapperPB + 'px',
      paddingLeft: oItem.main.wrapperPLR + 'px',
      paddingRight: oItem.main.wrapperPLR + 'px',
    }"
  >
    <div
      class="content"
      :style="{
        paddingTop: oItem.main.modulePT + 'px',
        paddingBottom: oItem.main.modulePB + 'px',
        paddingLeft: oItem.main.modulePLR + 'px',
        paddingRight: oItem.main.modulePLR + 'px',

        backgroundColor: oItem.main.wrapperBgColor,
        backgroundImage: oItem.main.wrapperBgImg
          ? 'url(\'' + oItem.main.wrapperBgImg + '\')'
          : 'none',
        borderTopLeftRadius: oItem.main.wrapperBTR + 'px',
        borderTopRightRadius: oItem.main.wrapperBTR + 'px',
        borderBottomLeftRadius: oItem.main.wrapperBBR + 'px',
        borderBottomRightRadius: oItem.main.wrapperBBR + 'px',
      }"
    >
      <div class="style1" v-if="oItem.main.style === 1">
        <ul>
          <li
            v-for="l in list"
            :key="l.id"
            :style="{
              marginBottom: oItem.main.moduleSpace + 'px',
              backgroundColor: oItem.main.moduleBgColor,
              backgroundImage: oItem.main.moduleBgImg
                ? 'url(\'' + oItem.main.moduleBgImg + '\')'
                : 'none',
              borderTopLeftRadius: oItem.main.moduleBTR + 'px',
              borderTopRightRadius: oItem.main.moduleBTR + 'px',
              borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
              borderBottomRightRadius: oItem.main.moduleBBR + 'px',
            }"
          >
            <div class="left">
              <img
                :src="l.logo"
                v-if="l.logo"
                alt=""
                :style="{
                  width: oItem.main.logoSize + 'px',
                  height: oItem.main.logoSize + 'px',
                }"
              />
              <p>
                <span
                  class="name"
                  :style="{
                    fontSize: oItem.main.titleFontSize + 'px',
                    color: oItem.main.titleFontColor,
                  }"
                  >{{ l.name }}</span
                >
                <span
                  class="time"
                  :style="{
                    fontSize: oItem.main.descFontSize + 'px',
                    color: oItem.main.descFontColor,
                  }"
                  >{{ l.time }}</span
                >
              </p>
            </div>
            <div class="right">
              <span
                class="num"
                :style="{
                  fontSize: oItem.main.numberFontSize + 'px',
                  color: oItem.main.numberFontColor,
                }"
                >+{{ parseFloat(l.num).toFixed(2) }}</span
              >
              <span
                class="tag"
                :style="{
                  fontSize: oItem.main.descFontSize + 'px',
                  color: oItem.main.descFontColor,
                }"
                >{{ l.tag }}</span
              >
            </div>
          </li>
        </ul>
      </div>

      <div
        class="style2"
        v-if="oItem.main.style === 2"
        :style="{
          backgroundColor: oItem.main.moduleBgColor,
          backgroundImage: oItem.main.moduleBgImg
            ? 'url(\'' + oItem.main.moduleBgImg + '\')'
            : 'none',
          borderTopLeftRadius: oItem.main.moduleBTR + 'px',
          borderTopRightRadius: oItem.main.moduleBTR + 'px',
          borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
          borderBottomRightRadius: oItem.main.moduleBBR + 'px',
        }"
      >
        <ul :style="{
          backgroundColor: oItem.main.moduleBgColor,
          backgroundImage: oItem.main.moduleBgImg
            ? 'url(\'' + oItem.main.moduleBgImg + '\')'
            : 'none',
          borderTopLeftRadius: oItem.main.moduleBTR + 'px',
          borderTopRightRadius: oItem.main.moduleBTR + 'px',
          borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
          borderBottomRightRadius: oItem.main.moduleBBR + 'px',
        }">
          <li v-for="l in list" :key="l.id">
            <div class="left">
              <img
                :src="l.logo"
                v-if="l.logo"
                alt=""
                :style="{
                  width: oItem.main.logoSize + 'px',
                  height: oItem.main.logoSize + 'px',
                }"
              />
              <p>
                <span
                  class="name"
                  :style="{
                    fontSize: oItem.main.titleFontSize + 'px',
                    color: oItem.main.titleFontColor,
                  }"
                  >{{ l.name }}</span
                >
                <span
                  class="time"
                  :style="{
                    fontSize: oItem.main.descFontSize + 'px',
                    color: oItem.main.descFontColor,
                  }"
                  >{{ l.time }}</span
                >
              </p>
            </div>
            <div class="right">
              <span
                class="num"
                :style="{
                  fontSize: oItem.main.numberFontSize + 'px',
                  color: oItem.main.numberFontColor,
                }"
                >+{{ parseFloat(l.num).toFixed(2) }}</span
              >
              <span
                class="tag"
                :style="{
                  fontSize: oItem.main.descFontSize + 'px',
                  color: oItem.main.descFontColor,
                }"
                >{{ l.tag }}</span
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
import tb from "@/static/images/tb.png";
import jd from "@/static/images/jd.png";
import mt from "@/static/images/mt.png";
import sn from "@/static/images/sn.png";
export default {
  name: "billPageListComponent",
  data() {
    return {
      oItem: null,
      list: [
        { id: 1, logo: tb, name: "淘宝", num: 60, tag: "其他收入", time: "12-25 05:50" },
        { id: 2, logo: jd, name: "京东", num: 100, tag: "团队收入", time: "12-07 05:50" },
        { id: 3, logo: mt, name: "抖音", num: 60, tag: "其他收入", time: "12-25 05:50" },
        { id: 4, logo: sn, name: "美团", num: 100, tag: "团队收入", time: "12-07 05:50" },
      ],
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.billPageListComponent {
  box-sizing: border-box;
  .content {
    box-sizing: border-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
  }
  .style1 {
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
    ul {
      display: flex;
      flex-direction: column;
      flex: 1;
      li {
        display: flex;
        flex: 1;
        justify-content: space-between;
        box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
        align-items: center;
        box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
          -3px -3px 3px #eee;
        &:last-child {
          margin-bottom: 0 !important;
        }
        .left {
          display: flex;
          align-items: center;
          margin: 15px 0;
          img {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            margin-right: 10px;
            margin-left: 15px;
          }
          p {
            display: flex;
            flex-direction: column;
            padding-top: 2px;
            .name {
              font-size: 16px;
              color: #333;
              margin-bottom: 2px;
            }
            .time {
              font-size: 12px;
              color: #999;
            }
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          padding-right: 15px;
          align-items: center;
          margin: 15px 0;
          .num {
            font-size: 16px;
            color: #333;
            margin-bottom: 2px;
          }
          .tag {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
  .style2 {
    display: flex;
    flex-direction: column;
    flex: 1;
    ul {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
        -3px -3px 3px #eee;
      li {
        display: flex;
        flex: 1;
        justify-content: space-between;
        align-items: center;
      
        .left {
          display: flex;
          align-items: center;
          margin: 15px 0;
          img {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            margin-right: 10px;
            margin-left: 15px;
          }
          p {
            display: flex;
            flex-direction: column;
            padding-top: 2px;
            .name {
              font-size: 16px;
              color: #333;
              margin-bottom: 2px;
            }
            .time {
              font-size: 12px;
              color: #999;
            }
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          padding-right: 15px;
          margin: 15px 0;
          align-items: center;
          .num {
            font-size: 16px;
            color: #333;
            margin-bottom: 2px;
          }
          .tag {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
